<template>
  <div class="modal-from">
    <a-modal
      title="复查开单"
      :width="1000"
      style="top: 50px;"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="submit"
      @cancel="handleCancel"
    >
      <a-row :gutter="24">
        <a-col :md="8" :sm="24" >
          姓名：{{row_record.clientName}}
        </a-col>
        <a-col :md="8" :sm="24">
          卡号：{{row_record.cardNo}}
        </a-col>
        <a-col :md="8" :sm="24">
          咨询师：{{row_record.receiveMan}}
        </a-col>
      </a-row>
      <a-row :gutter="24" style="margin-top:20px">
        <a-col :md="8" :sm="24" >
          联系方式：{{row_record.tel}}
        </a-col>
        <a-col :md="16" :sm="24" >
          <div class="remarks-style-box">
            <span>预警级别：</span>
            <a-select
              v-model="warningLvelValue" 
              style="width: 150px;margin-top:-6px" 
              @change="warningLvelChange"
            > 
              <a-select-option v-for="(item) in warningLvel" :value="item.value" :key="item.name">{{item.name}}</a-select-option> 
            </a-select>
          </div> 
          
        </a-col>
        
      </a-row>
      <a-row :gutter="24" style="margin-top:20px;margin-bottom:10px;">
        <a-col :md="24" :sm="24" style="font-weight:bold">
          客户消费项目列表
        </a-col> 
      </a-row>
      <a-row :gutter="24">
        <a-table  
          :columns="columns"
          :data-source="dataList"
          :rowKey="(record, index) => index"
          :pagination="false"
          :bordered="false"  
          :loading="tableLoading"
          :row-selection="rowSelectionsSmallTable" 
          
        >  
        </a-table>
      </a-row>
      

    </a-modal>
  </div>

</template>

<script> 
import {  
  SelectConsultItemReview,
  AddTgsTreat
} from '@/api/modular/main/customer/cashier'

export default {
  props: {
    row_record: {
      type: Object,
      default: () => {
        {}
      },
    },
  },
  data(){
    return{ 
      tableLoading:false,
      dataList:[],
      value: [],
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      pagination: {
        current: 1,//当前页
        pageSize: 10,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `共有 ${ total} 条数据`,//分页中显示总的数据
      },  
      columns: [
        { title: '序号', customRender: (text, record, index)=>index+1 , width: 80, align: 'center'},
        { title: '项目名称', dataIndex: 'itemName', width: 180, align: 'center'}, 
        { title: '次数', dataIndex: 'qty', width: 80, align: 'center'}, 
        { title: '科室', dataIndex: 'execDeptName' , width: 120, align: 'center'},
        { title: '治疗日期', dataIndex: 'lastTreatTime' , width: 180, align: 'center'}, 
      ],
      selectedRowKeys: [],
      
      checkSelectData: [],

      warningLvelValue: 1,
      warningLvel:[
        {
          name: '普通',
          value: 1,
        },
        {
          name: '中度',
          value: 2,
        },
        {
          name: '重度',
          value: 3,
        }
      ]
       
    }
  },
  computed: {
    // 项目里面的展开列表数据的勾选
    rowSelectionsSmallTable(){ 
      return { 
        selectedRowKeys: this.selectedRowKeys,
        columnTitle:' ',
        onSelect: (record, selected, selectedRows, nativeEvent) => { 
          console.log(selectedRows)
          this.checkSelectData = [...selectedRows]
           
        }, 
        onChange: (selectedRowKeys, selectedRows, state, record) => { 
          this.selectedRowKeys = selectedRowKeys; // 默认选中项
        },
      } 
    },
  },
  methods:{ 
    warningLvelChange(value){
      console.log(value)
      this.warningLvelValue = value
    },
    show () { 
      this.visible = true
      this.disabled=true
      this.tableLoading = true
      this.selectedRowKeys = [] // 进入页面清空选中项
      
      console.log(this.row_record)
      let senData = {
        tbCustomerId: this.row_record.clientId
      }
      SelectConsultItemReview(senData).then(res => {
        if(res.code == 200){
          this.tableLoading = false
          this.dataList = res.rows
        }else{
          this.$message.error(res.msg);
        } 
      })
    },
    submit(){   
      let record = this.row_record

      let newData = this.checkSelectData.map(item => {
        return {
          tbConsultItemId: item.tbConsultItemId,
          clientId: record.clientId,
          treatDeptId: item.execDept,
          treatDeptName: item.execDeptName,
          treatDrId: record.erpId,
          treatDrName: record.name,
          dealId: item.tbConsultItemId,
          itemId: item.itemId,
          itemName: item.itemName
        }
      })

      if(newData.length < 1){
        this.$message.error('请勾选需要复查的项目')
        return false
      }

      let sendData = {
        clientId: record.clientId,
        alertLevel: this.warningLvelValue,
        treatList: newData
      }
      
      AddTgsTreat(sendData).then(result => {
        if(result.code == 200){
          this.visible = false
          this.selectedRowKeys = [] // 进入页面清空选中项
          this.$message.success(result.message)
          this.$parent.$refs.table.loadData()
        }else{
          this.$message.error(result.message)
        }
      })
    },
    handleCancel () { 
      this.visible = false
    },

  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-head-title{
  font-weight: bold;
}
/deep/ .ant-page-header-heading-title{
  font-weight: normal;
  font-size: 16px;
}
/deep/ .ant-card-body {
  padding: 24px 12px 0;
}
/deep/ .ant-form-item-control-wrapper{
  width: 100%;
}
/deep/ .ant-table-thead > tr > th, 
/deep/ .ant-table-tbody > tr > td{
  padding: 10px 16px !important;
}
.remarks-style-box {
  display: flex;
  span {
    display: block;
    width: 70px;
  }
}
</style>